<template>
  <div>
      <div class="diy-search-one">
        <input type="text" disabled :placeholder="searchText" :style="searchArr[diyStyle].searchItem" />
        <svg-icon class-name="search" icon-class="search_unchecked "></svg-icon>
      </div>
  </div>
</template>
<script>
export default {
  props: ["comObj", "nowComIdx"],
  data() {
    return {
      searchArr: [
        {
          id: 1,
          searchItem: {
            borderRadius: "14px",
            border: "1px solid rgba(224,225,232,1)"
          }
        },
        {
          id: 2,
          searchItem: {
            borderRadius: "1px",
            border: "1px solid rgba(224,225,232,1)"
          }
        },
        {
          id: 3,
          searchItem: {
            background: "rgba(0,0,0,.05)",
            borderRadius: "14px"
          }
        },
        {
          id: 4,
          searchItem: {
            background: "rgba(0,0,0,0.05)",
            borderRadius: "3px"
          }
        }
      ]
    };
  },
  computed: {
    searchText: function() {
      return this.$store.state.search.placeholder;
    },
    diyStyle: function() {
      let num = 0;
      for (const i in this.searchArr) {
        if (this.searchArr[i].id === this.$store.state.search.diystyle) {
          num = i;
        }
      }
      return num;
    }
  },
  created: function() {
    console.log(this.comObj);
  },
  methods: {}
};
</script>
<style lang="scss" scoped>
@mixin searchCon($w, $h, $borderRadius, $bg) {
  width: $w;
  height: $h;
  border-radius: $borderRadius;
  background: $bg;
}
.diy-search-one,
.diy-search-two,
.diy-search-three,
.diy-search-four {
  width: 100%;
  height: 50px;
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 20px;
  input {
    @include searchCon(100%, 30px, 14px, #ffffff);
    border: 0;
    text-align: center;
    font-size: 14px;
    border: 1px solid rgba(230, 230, 230, 1);
  }
  .search {
    position: absolute;
    left: 50%;
    margin-left: -20%;
  }
}
</style>
